<template>
    <div class="loginjm">
        <div class="dabox">
            <div class="xiaobox">
                <h1>后天系统</h1>
                <el-form>
                    <el-form  status-icon  label-width="120px"
                        class="demo-ruleForm">
                        <el-form-item label="用户名">
                            <el-input v-model="rs" type="text" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="密码" >
                            <el-input v-model="rm" type="password" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="验证码">
                            <el-input v-model.number="yz" >
                                <template #append>
                                    1111 
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" class="bot" @click="fn">登录</el-button>
                        </el-form-item>
                    </el-form>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
// import axios from "axios";
export default {
    data() {
        return {
            rm: "",
            rs: "",
            yz:"",
        }
    },
    methods: {
        fn(){
            this.$router.push("/start/page")
        }
    }
}
</script>
<style scoped>
.loginjm {
    height: 100%;
    width: 100%;
    background-color: pink;
    /* overflow: hidden; */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

h1 {
    width: 300px;
    margin: 2em auto;
    text-align: center;
    letter-spacing: 0.5em;
}
.el-input__wrapper{
    outline:none
}
 .loginjm  /deep/  .el-input {
    width:500px;
 }
 .bot{
    width:500px;
 }
</style>
<style lang="scss">
@mixin fn1($width, $height, $backgroundColor, $color) {
    width: $width;
    height: $height;
    background-color: $backgroundColor;
    color: $color;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.dabox {
    @include fn1(800px, 600px, gainsboro, black);
    border-radius: 20px;
}

.xiaobox {
    @include fn1(730px, 530px, white, black);
    border-radius: 40px;
    display: block;
}
</style>